<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/unpkg/element-ui@2.12.0/lib/theme-chalk/index.css">
<style type="text/css">
	[v-cloak] {
        display: none
    }
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
	.edit-text,
    .del-text,
    .enable-text,
    .disable-text {
        cursor: pointer;
        color: #444;
        margin-right: 14px;
    }

    .edit-text {
        color: #0085ac;
    }
	.del-text {
        color: #FF5959;
    }
	
</style>
</head>

<body>
	<!-- MAIN -->
	<div id="organization-lists" v-cloak class="main">
		<!-- MAIN CONTENT -->
		
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>团队管理</li>
				<li><a href="{%:url('organization/lists')%}">团队列表</a></li>
				<li>队员列表</li>
			</ul>
			<div >
				<el-button type="primary" size="mini" @click="buyersDialog=true">添加队员
				</el-button>
				<el-table ref="multipleTable" :data="organizationData" tooltip-effect="dark" style="width: 100%" border
					>
					<!-- <el-table-column type="selection" min-width="36"> -->
					</el-table-column>
					<el-table-column label="ID" prop="id" min-width="70">
						<template slot="header" slot-scope="scope">
							<div class="display-flex">
								<div>ID</div>
							</div>
						</template>
					</el-table-column>

					<el-table-column label="队员" min-width="148">
						<template slot-scope="scope">
							<div >
								{{scope.row.name}}
								<span v-if="scope.row.is_owner" style="color: red;">(负责人)</span>
							</div>
						</template>
					</el-table-column>

					<el-table-column fixed="right" label="操作" min-width="170">
						<template slot-scope="scope">
							<span class="edit-text" @click="organizationOpt('edit',scope.row.id,scope.row.is_owner==1?0:1)">{{scope.row.is_owner==1?'取消负责人':'设置负责人'}}</span>
							<span class="del-text" @click="organizationOpt('del',scope.row.id)">删除</span>
						</template>
					</el-table-column>

				</el-table>
			</div>
			<div class="page-container display-flex">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage"  :page-size="limit"
					layout="total, prev, pager, next, jumper" :total="totalPage">
				</el-pagination>
			</div>
		</div>
		<!-- END MAIN CONTENT -->
	<!-- 多选采购商弹框 -->
	<el-dialog
	title="添加队员"
	:visible.sync="buyersDialog"
	width="50%"
	>
	<div >
		<el-table ref="multipleTable" :data="accountInfo.rows" tooltip-effect="dark" style="width: 100%" border
			>
			<!-- <el-table-column type="selection" min-width="36"> -->
			</el-table-column>
			<el-table-column label="ID" prop="id" min-width="70">
				<template slot="header" slot-scope="scope">
					<div class="display-flex">
						<div>ID</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="用户" min-width="148">
				<template slot-scope="scope">
					<div >
						{{scope.row.true_name}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="团队" min-width="148" align="center">
				<template slot-scope="scope">
					<div >
						<block  v-for="member in scope.row.account_member" :key="member.id">[{{member.organization_id}}]</block>
						<block v-if="scope.row.account_member.length==0">无</block>
					</div>
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" min-width="170">
				<template slot-scope="scope">
					<!-- <span class="edit-text" @click="editShow(scope.row.id)">编辑 </span> -->
					<span class="edit-text" @click="organizationOpt('add',scope.row.id,scope.row.true_name)">添加</span>
				</template>
			</el-table-column>

		</el-table>
	</div>
	<div class="page-container display-flex">
		<el-pagination @size-change="accountHandleSizeChange" @current-change="accountHandleCurrentChange"
			:current-page="accountCurrentPage"  page-size="10"
			layout="total,  prev, pager, next, jumper" :total="accountInfo.total">
		</el-pagination>
	</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="buyersDialog = false">取 消</el-button>
			<el-button type="primary" @click="buyersDialog = false" >确 定</el-button>
		</span>
	</el-dialog>
	</div>

	<!-- END MAIN -->
	<div class="clearfix"></div>
	<!-- FOOTER -->
	{%include file="public/footer" /%}
	<!-- END FOOTER -->


	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/bootstrap/js/bootstrap.min.js"></script>

	<script src="__STATIC__/assets/vendor/jquery.form.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>

	<!-- vue -->
	<script src="__ROOT__/assets/addons/shopro/libs/vue.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/Sortable.min.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/vuedraggable.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/moment.js"></script>
	<script type="text/javascript">
		var id ="{%$id%}";
		console.log({id});
		var organizationLists = new Vue({
                el: "#organization-lists",
                data() {
                    return {
                        name:'',
						buyersDialog:false,
						organizationData:[],//组织
						currentPage:1,//当前页
						totalPage:0,
						limit:10,
						editId:0,
						editDialog:false,
						organizationId:id,//团队id
						accountInfo:{
							total:0
						},//队员信息
						accountCurrentPage:1
                        
                    }
                },
                created() {
					this.getOrganization();
					this.getAccountList();
                },
                methods: {
					editShow(id){
						this.editId = id;
						this.editDialog = true;
					},
					// 编辑团队
					organizationOpt(type,id,name){
						console.log({type,id});
						let that = this;
						switch(type){
							case 'edit':
								$.post("{%:url('organization/editMember')%}",{
								is_owner:name,//是否是负责人
								id
								},function(rsp){
									if(rsp.code==1){
										that.getOrganization();
									}else{
										that.$message.error(rsp.msg);
									}
									
								},'json')
								break;
							case 'del':
								$.post("{%:url('organization/delMember')%}",{
								id:id
								},function(rsp){
									if(rsp.code==1){
										that.$message.success(rsp.msg);
										that.getOrganization();
									}else{
										that.$message.error(rsp.msg);
									}
									layer.alert(rsp.msg,{icon: icon},function(index){
										layer.close(index);
									});
								},'json')
								break;
							case 'add':
								$.post("{%:url('organization/joinOrganization')%}",{
								account_id:id,
								organization_id:that.organizationId,
								name:name
								},function(rsp){
									if(rsp.code==1){
										// that.buyersDialog = false;
										that.$message.success(rsp.msg);
										that.getOrganization();
										that.getAccountList();
									}else{
										that.$message.error(rsp.msg);
									}
									
								},'json')
								break;
						}
					},
					handleSizeChange(){},
					// 切换分页
					handleCurrentChange(val){
						this.currentPage = val;
						this.getOrganization();
					},
					accountHandleSizeChange(){},
					// 切换分页
					accountHandleCurrentChange(val){
						this.accountCurrentPage = val;
						this.getAccountList();
					},
					// 获取队员列表
					getOrganization(){
							let that = this;
							$.post("{%:url('organization/getOrganzitionList')%}",{
							page:that.currentPage,
							id:that.organizationId
							},function(rsp){
								if(rsp.code == 1){
									that.organizationData = rsp.data.data;
									that.currentPage = rsp.data.current_page;
									that.totalPage = rsp.data.total;
								}
							},'json')
						
					},
					// 获取用户列表
					getAccountList(){
							let that = this;
							$.get("{%:url('Account/getList')%}",{
							page:that.accountCurrentPage,
							page_size:10,
							status:1//账号启用状态
							},function(rsp){
								if(rsp.code == 1){
									that.accountInfo = rsp.data;
								}
							},'json')
						
					}
					
				},
				watch: {
                   
                }
    	})
		
	</script>
</body>

</html>